import React from "react"
import { Carousel, WingBlank, Tabs, WhiteSpace, PullToRefresh, Button } from 'antd-mobile';
import a1 from "./img/1.png"
import a2 from "./img/2.png"
import a3 from "./img/3.png"
import a4 from "./img/4.png"
import a5 from "./img/5.png"
import a6 from "./img/点赞.png"
import a7 from "./img/点赞 (1).png"
import a8 from "./img/消息.png"
import a9 from "./img/省略号2.png"
import Findcss from "./style/index.module.css"
import "../../assets/style/index.css"
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Meirituijian from "./每日推荐/每日推荐/index"
import Gedan from "./每日推荐/歌单/index"
import Paihangbang from "./每日推荐/排行榜/index"
import Diantai from "./每日推荐/电台/index"
import Gengduoxindie from "./新歌/index"
import "../antd-listView下拉刷新组件"
// import Zhibo from "./每日推荐/直播/index"
const tabs = [
    { title: '新碟' },
    { title: '新歌' },
];
// 下拉刷新
function genData() {
    const dataArr = [];
    for (let i = 0; i < 20; i++) {
        dataArr.push(i);
    }
    return dataArr;
}
class Find extends React.Component {
    state = {
        data: ["7Wxn3b7A2OxVAHuPWLnEmA==/109951164500615959", "QmeMcFEf84QWXXIjO4QpBw==/109951164499916903"
            , "NzC8PPWR4SQbbm3bz9YsNw==/109951164500600171", "KRlazN4B32tTXH2CuQobGA==/109951164500608286"
            , "pTCXdFq8Tz4H-KVkxhLtGA==/109951164500575206", "2yh7rSB7vmJH06cr4GWAIg==/109951164500585257"
            , "LAQvfszxItqNJRrgeGt6Xw==/109951164500598472", "FIPbxHCUx7l_74GeRHlpxg==/109951164500559810"],
        imgHeight: 176,
        tuijiangedan: [],
        xindiexinge: [],
        xindiexinge2: [],
        yuncunjingxuanspan: [],
        duoviewjiazai: [],
        duoviewjiazai2: [],
        zhoumozuanyong: [],
        zhoumozuanyong1: [],
        dianzanbianred: false,
        refreshing: false,//下拉刷新
        down: true,
        height: document.documentElement.clientHeight,
        data: [],
    }
    componentDidMount() {//下拉刷新
        const hei = this.state.height - Find.findDOMNode(this.ptr).offsetTop;
        // const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop;
        setTimeout(() => this.setState({
            height: hei,
            data: genData(),
        }), 0);
    }
    componentWillMount() {
        // fetch('http://106.12.79.128:666/login/cellphone?phone=17855378012&password=nyny2ynyn1')
        //     .then(body => body.json())
        //     .then(res => {
        //         console.log(res.result)
        //         // this.setState({
        //         //     tuijiangedan: res.result
        //         // })
        //     })
        // http://106.12.79.128:666/personalized/newsong&limit=3 音乐分类
        // http://106.12.79.128:666/top/artists?limit=3 听歌打卡（很多很多个）
        // http://106.12.79.128:666/comment/hotwall/list云村热评
        fetch('http://106.12.79.128:666/personalized?limit=6')//推荐歌单
            .then(body => body.json())
            .then(res => {
                // console.log(res.result)
                this.setState({
                    tuijiangedan: res.result
                })
            })
        fetch('http://106.12.79.128:666/top/album?limit=3')//新碟
            .then(body => body.json())
            .then(res => {
                console.log(res.albums[0])
                this.setState({
                    xindiexinge: res.albums
                })
            })
        fetch(' http://106.12.79.128:666/mv/first?limit=3')//新歌
            .then(body => body.json())
            .then(res => {
                // console.log(res.data[0])
                this.setState({
                    xindiexinge2: res.data
                })
            })
        fetch('http://106.12.79.128:666/video/group?id=9104', {
            credentials: 'include'
        })//云村精选
            .then(body => body.json())
            .then(res => {
                console.log(res.datas[0].data.vid)
                // console.log(res.datas[0])
                var obj = {
                    id: res.datas[0].data.urlInfo.id,
                    url: res.datas[0].data.urlInfo.url,
                    title: res.datas[0].data.title,
                    coverUrl: res.datas[0].data.coverUrl,
                    praisedCount: res.datas[0].data.praisedCount,
                    shareCount: res.datas[0].data.shareCount,
                    vid: res.datas[0].data.vid
                };
                this.setState({
                    yuncunjingxuanspan: [obj]
                })
            })
        fetch('http://106.12.79.128:666/video/group?id=9102', {
            credentials: 'include'
        })//十个视频
            .then(body => body.json())
            .then(res => {
                this.setState({
                    duoviewjiazai: res.datas
                })
            })
        fetch('http://106.12.79.128:666/video/group?id=9100', {
            credentials: 'include'
        })//十个视频
            .then(body => body.json())
            .then(res => {
                this.setState({
                    duoviewjiazai2: res.datas
                })
            })

        // fetch('http://106.12.79.128:666/top/artists?limit=3')//歌手接口
        fetch('http://106.12.79.128:666/personalized?limit=24')
            .then(body => body.json())
            .then(res => {
                for (var i = 21; i < 24; i++) {
                    (this.state.zhoumozuanyong).push(res.result[i])
                    this.setState({
                    })
                }
            })
        fetch('http://106.12.79.128:666/comment/hotwall/list')
            .then(body => body.json())
            .then(res => {
                console.log(res);
                // for (var i = 21; i < 24; i++) {
                //     (this.state.zhoumozuanyong).push(res.result[i])
                //     this.setState({
                //     })
                // }
            })
        fetch('http://106.12.79.128:666/top/playlist?limit=1&order=官方')
            .then(body => body.json())
            .then(res => {
                console.log(res.playlists[0]);
                this.setState({
                    zhoumozuanyong1: res.playlists
                })
            })
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                data: ["7Wxn3b7A2OxVAHuPWLnEmA==/109951164500615959", "QmeMcFEf84QWXXIjO4QpBw==/109951164499916903"
                    , "NzC8PPWR4SQbbm3bz9YsNw==/109951164500600171", "KRlazN4B32tTXH2CuQobGA==/109951164500608286"
                    , "pTCXdFq8Tz4H-KVkxhLtGA==/109951164500575206", "2yh7rSB7vmJH06cr4GWAIg==/109951164500585257"
                    , "LAQvfszxItqNJRrgeGt6Xw==/109951164500598472", "FIPbxHCUx7l_74GeRHlpxg==/109951164500559810"],
            });
        }, 100);
    }
    dianzantubiao() {//点赞
        this.setState({
            dianzanbianred: !this.state.dianzanbianred
        })

    }
    jump(playlistid) {
        const id = this.props.location.id
        this.props.history.push({ pathname: "/Findplaylist", playlistid, id });
    }
    render() {
        // console.log(this.state.tuijiangedan[0]);
        let { tuijiangedan, xindiexinge, xindiexinge2, yuncunjingxuanspan,
            duoviewjiazai, duoviewjiazai2, zhoumozuanyong, zhoumozuanyong1 } = this.state
        return (

            <div>
                <div>
                    {/* <Button
                        style={{ marginBottom: 15 }}
                        onClick={() => this.setState({ down: !this.state.down })}
                    >
                        direction: {this.state.down ? 'down' : 'up'}
                    </Button> */}
                    <PullToRefresh
                        damping={60}
                        ref={el => this.ptr = el}
                        style={{
                            height: this.state.height,
                            overflow: 'auto',
                        }}
                        indicator={this.state.down ? {} : { deactivate: '上拉可以刷新' }}
                        direction={this.state.down ? 'down' : 'up'}
                        refreshing={this.state.refreshing}
                        onRefresh={() => {
                            this.setState({ refreshing: true });
                            setTimeout(() => {
                                this.setState({ refreshing: false });
                            }, 1000);
                        }}
                    >
                        {
                            <div>

                                {/* -----------------------------------轮播图--------------------------------------------- */}
                                <WingBlank>
                                    <Carousel
                                        autoplay
                                        infinite
                                    // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                                    // afterChange={index => console.log('slide to', index)}
                                    >
                                        {this.state.data.map(item => (
                                            <a
                                                key={item}
                                                href="http://www.alipay.com"//跳转到图片地址
                                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                            >
                                                <img
                                                    src={`http://p1.music.126.net/${item}.jpg?imageView&quality=89`}
                                                    alt=""
                                                    style={{ width: '100%', verticalAlign: 'top', borderRadius: '6px' }}
                                                    onLoad={() => {
                                                        // fire window resize event to change height
                                                        window.dispatchEvent(new Event('resize'));
                                                        this.setState({ imgHeight: 'auto' });
                                                    }}
                                                />
                                            </a>
                                        ))}
                                    </Carousel>
                                </WingBlank>
                                {/* -----------------------------------五个每日推荐--------------------------------------------- */}
                                <div className={Findcss.comdiv}>
                                    <Link className={Findcss.coma} to="/meirituijian">
                                        <img className={Findcss.com} src={a1} alt="" /><br />
                                        <span className={Findcss.comspan} className="FindcssComspan">每日推荐</span>
                                    </Link>
                                    <Link className={Findcss.coma} to="/Gedan">
                                        <img className={Findcss.com} src={a2} alt="" /><br />
                                        <span className={Findcss.comspan}>歌单</span>
                                    </Link>
                                    <Link className={Findcss.coma} to="/Paihangbang">
                                        <img className={Findcss.com} src={a3} alt="" /><br />
                                        <span className={Findcss.comspan} className="FindcssComspan1">排行榜</span>
                                    </Link>
                                    <Link className={Findcss.coma} to="/Diantai">
                                        <img className={Findcss.com} src={a4} alt="" /><br />
                                        <span className={Findcss.comspan}>电台</span>
                                    </Link>
                                    {/* <Link className={Findcss.coma} to="/Zhibo">
                                        <img className={Findcss.com} src={a5} alt=""/><br />
                                        <span className={Findcss.comspan}>直播</span>
                                    </Link> */}
                                </div>
                                <div className={Findcss.comhr}></div>
                                <Switch>
                                    <Route path="/meirituijian" component={Meirituijian}></Route>
                                    <Route path="/Gedan" component={Gedan}></Route>
                                    <Route path="/Paihangbang" component={Paihangbang}></Route>
                                    <Route path="/Diantai" component={Diantai}></Route>
                                    <Route path="/Gengduoxindie" component={Gengduoxindie}></Route>
                                    {/* <Route path="/Zhibo" component={Zhibo}></Route> */}
                                </Switch>
                                {/* -----------------------------------推荐歌单--------------------------------------------- */}
                                <div>
                                    <span className={Findcss.tuijianspan}>推荐歌单</span>
                                    <Link to="/Gedan">
                                        <div className={Findcss.gedanspan}>歌单广场</div>
                                    </Link>
                                    <div className={Findcss.Litemdiv}>
                                        <ul>
                                            {
                                                tuijiangedan.map(item =>
                                                    <li className={Findcss.Litemli} key={item.id}>
                                                        {/* <a className={Findcss.Litema} href="#"> */}
                                                        <img onClick={this.jump.bind(this, item.id)} className={Findcss.Litemimg} src={item.picUrl} alt="" />
                                                        <span className={Findcss.Litemspan}>▷{item.trackCount}
                                                            <b className={Findcss.Litemb}>万</b>
                                                        </span>
                                                        <p className={Findcss.Litemp}>{item.name}</p>
                                                        {/* </a> */}
                                                    </li>
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                                {/* -----------------------------------新碟新歌--------------------------------------------- */}
                                <div className={Findcss.xindiediv} >
                                    <WhiteSpace />
                                    <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false} >
                                        <div style={{
                                            display: 'flex', alignItems: 'center',
                                            justifyContent: 'center', height: '170px', backgroundColor: '#fff'
                                        }}>
                                            <ul>
                                                {
                                                    xindiexinge.map(item =>
                                                        <li className={Findcss.Litemli} key={item.id}>
                                                            {/* <a className={Findcss.Litema} href="#"> */}
                                                            <Link to="/Gengduoxindie">
                                                                <img className={Findcss.Litemimg} src={item.picUrl} alt="" />
                                                            </Link>
                                                            <p className={Findcss.Litemp4}>{item.name}</p>
                                                            {/* </a> */}
                                                        </li>
                                                    )
                                                }
                                            </ul>
                
                                        </div>
                                        <div style={{
                                            display: 'flex', alignItems: 'center',
                                            justifyContent: 'center', height: '170px', backgroundColor: '#fff'
                                        }}>
                                            <ul>
                                                {
                                                    xindiexinge2.map(item =>
                                                        <li className={Findcss.Litemli} key={item.id}>
                                                            {/* <a className={Findcss.Litema} href="#"> */}
                                                            <Link to="/Gengduoxindie">
                                                                <img className={Findcss.Litemimg2} src={item.cover} alt="" />
                                                            </Link>
                                                            <p className={Findcss.Litemp2}>{item.name}</p>
                                                            {/* </a> */}
                                                        </li>
                                                    )
                                                }
                                            </ul>
                                        </div>
                                    </Tabs>
                                    <WhiteSpace />
                                    <div className={Findcss.gengduoxindie}>
                                        {/* 跳到更多新碟 */}
                                        <Link to="/Gengduoxindie">更多新碟></Link></div>
                                </div>
                                <div className={Findcss.comhr2}></div>
                                {/* -----------------------------------云村精选--------------------------------------------- */}
                                <div>
                                    <span className={Findcss.yuncunjingxuanspan}>云村精选</span>
                                    <div className={Findcss.xinneirongspan}>⟳获取新内容</div>
                                    <div className={Findcss.comhr}></div>
                                    <div className={Findcss.yuncundiv111}>
                                        <ul>
                                            {
                                                yuncunjingxuanspan.map(item =>
                                                    <li key={item.id}>
                                                        <div className={Findcss.itemyuncundiv}>
                                                            {/* <a className={Findcss.itemyuncuna} href="#"> */}
                                                            <Link to={`/morevideo?${item.vid}`}>
                                                                <video className={Findcss.itemyuncunvideo} src={item.url}
                                                                    controls poster={item.coverUrl}></video>
                                                                <div className={Findcss.itemyuncuntitlediv}>
                                                                    <span className={Findcss.itemyuncunspan2}>{item.title}</span>
                                                                    <img className={Findcss.itemyuncunimg} src={item.coverUrl} alt="" />
                
                                                                </div>
                                                            </Link>
                                                            {/* </a> */}
                                                            <div>
                                                                <div className={Findcss.itemdianzandiv} onClick={this.dianzantubiao.bind(this)}>
                                                                    <img className={Findcss.itemdianzanimg1}
                                                                        src={this.state.dianzanbianred ? a7 : a6} alt="" />
                                                                    <span className={this.state.dianzanbianred ? Findcss.itemdianzanspan2 : Findcss.itemdianzanspan1}>
                                                                        {this.state.dianzanbianred ? item.shareCount-- : item.shareCount++}</span>
                                                                    <img className={Findcss.itemdianzanimg2}
                                                                        src={a8} alt="" />
                                                                    <b className={Findcss.itemdianzanb}>{item.praisedCount}</b>
                                                                    <img className={Findcss.itemdianzanimg3} src={a9} alt="" />
                                                                </div>
                
                                                            </div>
                                                        </div>
                                                    </li>
                
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                                <div className={Findcss.comhr2}></div>
                                {/* -----------------------------------云村热评--------------------------------------------- */}
                                <div>
                                    <span className={Findcss.tuijianspan}>云村热评</span>
                                    <div className={Findcss.comhr}></div>
                                    <div className={Findcss.yuncundiv111}>
                                        <ul>
                                            {
                                                zhoumozuanyong1.map(item =>
                                                    <li key={item.id}>
                                                        <div className={Findcss.itemyuncundiv5}>
                                                            <a className={Findcss.itemyuncuna} href="#">
                                                                <div className={Findcss.litemdivp1}>
                                                                    <p className={Findcss.Litemp5}>{item.description}</p>
                                                                </div>
                                                            </a>
                                                            <div>
                                                                <div className={Findcss.itemdianzandiv5}>
                                                                    <img className={Findcss.itemdianzanimg1}
                                                                        src={a6} alt="" />
                                                                    <span className={Findcss.itemdianzanspan4}>
                                                                        {item.subscribedCount}</span>
                
                                                                    <img className={Findcss.itemdianzanimg2}
                                                                        src={a8} alt="" />
                                                                    <b className={Findcss.itemdianzanb}>{item.trackCount}</b>
                                                                    <img className={Findcss.itemdianzanimg3} src={a9} alt="" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                                <div className={Findcss.comhr2}></div>
                                {/* -----------------------------------十条视频--------------------------------------------- */}
                                <div>
                                    <div className={Findcss.yuncundiv111}>
                                        <ul>
                                            {
                                                duoviewjiazai.map((item, index) =>
                                                    <li key={item.data.urlInfo.id}>
                                                        <div className={Findcss.itemyuncundiv}>
                                                            <a className={Findcss.itemyuncuna} href="#">
                                                                <video className={Findcss.itemyuncunvideo} src={item.data.urlInfo.url}
                                                                    controls poster={item.data.coverUrl}></video>
                                                                <div className={Findcss.itemyuncuntitlediv}>
                                                                    <span className={Findcss.itemyuncunspan2}>{item.data.title}</span>
                                                                    <img className={Findcss.itemyuncunimg} src={item.data.coverUrl} alt="" />
                
                                                                </div>
                                                            </a>
                                                            <div>
                                                                <div className={Findcss.itemdianzandiv}>
                                                                    <img className={Findcss.itemdianzanimg1}
                                                                        src={a6} alt="" />
                                                                    <span className={Findcss.itemdianzanspan4}>
                                                                        {item.data.shareCount}</span>
                
                                                                    <img className={Findcss.itemdianzanimg2}
                                                                        src={a8} alt="" />
                                                                    <b className={Findcss.itemdianzanb}>{item.data.praisedCount}</b>
                                                                    <img className={Findcss.itemdianzanimg3} src={a9} alt="" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className={Findcss.comhr2}></div>
                                                    </li>
                
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                                {/* -----------------------------------周末怎么能没音乐--------------------------------------------- */}
                                <div>
                                    <span className={Findcss.tuijianspan}>周末 怎能不来点音乐?</span>
                                    <img className={Findcss.tingtingshenglue} src={a9} alt="" />
                                    {/* 省略号弹框 */}
                                    <div className={Findcss.commonshengluehao}></div>
                
                                    <div className={Findcss.Litemdiv}>
                                        <ul>
                                            {
                                                zhoumozuanyong.map(item =>
                                                    <li className={Findcss.Litemli} key={item.id}>
                                                        {/* <a className={Findcss.Litema} href="#"> */}
                                                        <img onClick={this.jump.bind(this, item.id)} className={Findcss.Litemimg2} src={item.picUrl} alt="" />
                                                        <span className={Findcss.Litemspan}>▷{item.trackCount}
                                                            <b className={Findcss.Litemb}>万</b>
                                                        </span>
                                                        <p className={Findcss.Litemp}>{item.name}</p>
                                                        {/* </a> */}
                                                    </li>
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                                <div className={Findcss.comhr2}></div>
                                {/* -----------------------------------十条视频--------------------------------------------- */}
                                <div>
                                    <div className={Findcss.yuncundiv111}>
                                        <ul>
                                            {
                                                duoviewjiazai2.map(item =>
                                                    <li key={item.data.urlInfo.id}>
                                                        <div className={Findcss.itemyuncundiv}>
                                                            <a className={Findcss.itemyuncuna} href="#">
                                                                <video className={Findcss.itemyuncunvideo} src={item.data.urlInfo.url}
                                                                    controls poster={item.data.coverUrl}></video>
                                                                <div className={Findcss.itemyuncuntitlediv}>
                                                                    <span className={Findcss.itemyuncunspan2}>{item.data.title}</span>
                                                                    <img className={Findcss.itemyuncunimg} src={item.data.coverUrl} alt="" />
                
                                                                </div>
                                                            </a>
                                                            <div>
                                                                <div className={Findcss.itemdianzandiv}>
                                                                    <img className={Findcss.itemdianzanimg1}
                                                                        src={a6} alt="" />
                                                                    <span className={Findcss.itemdianzanspan4}>
                                                                        {item.data.shareCount}</span>
                                                                    <img className={Findcss.itemdianzanimg2}
                                                                        src={a8} alt="" />
                                                                    <b className={Findcss.itemdianzanb}>{item.data.praisedCount}</b>
                                                                    <img className={Findcss.itemdianzanimg3} src={a9} alt="" />
                                                                </div>
                
                                                            </div>
                                                        </div>
                                                        <div className={Findcss.comhr2}></div>
                                                    </li>
                
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                            
                            </div>
                        }
                    <Button
                        style={{ marginBottom: 15 }}
                        onClick={() => this.setState({ down: !this.state.down })}
                    >
                        direction: {this.state.down ? 'down' : 'up'}
                    </Button>
                    </PullToRefresh>
                </div>
            </div>
        );
    }
}

export default Find

